<template>
  <ActivityHeader :title="title" />
  <div class="flex flex-col flex-1 overflow-y-auto">
    <div v-if="activities.length" class="activities flex-1 h-full mt-1">
      <div v-for="(activity, i) in activities" :key="activity.key">
        <!-- single activity -->
        <div
          class="w-full activity px-3 sm:px-10 grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 sm:gap-4"
        >
          <div
            class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200"
            :class="[i != activities.length - 1 ? 'after:h-full' : 'after:h-4']"
          >
            <div
              class="z-10 flex h-7 w-7 items-center justify-center rounded-full bg-white"
              :class="[
                activity.type === 'comment' ? 'mt-0.5' : '',
                activity.type === 'email' ? 'mt-2' : '',
              ]"
            >
              <Avatar
                v-if="activity.type === 'email'"
                size="md"
                :label="activity.sender?.full_name"
                :image="getUser(activity.sender?.name).user_image"
                class="bg-white"
              />
              <CommentIcon
                v-else-if="activity.type === 'comment'"
                class="text-gray-800"
              />
              <DotIcon v-else class="text-gray-600" />
            </div>
          </div>
          <div class="mb-4 w-full">
            <EmailArea
              v-if="activity.type === 'email'"
              :activity="activity"
              class="py-2 px-3"
              @reply="(e) => emit('email:reply', e)"
            />
            <CommentBox
              v-else-if="activity.type === 'comment'"
              :activity="activity"
              @update="() => emit('update')"
            />
            <HistoryBox v-else :activity="activity" />
          </div>
        </div>
      </div>
    </div>
    <div
      v-else
      class="h-full flex flex-col items-center justify-center gap-3 text-xl font-medium text-gray-500"
    >
      <component :is="emptyTextIcon" class="h-10 w-10" />
      <span>{{ emptyText }}</span>
      <Button
        v-if="title == 'Emails'"
        label="New Email"
        @click="communicationAreaRef.toggleEmailBox()"
      />
      <Button
        v-else-if="title == 'Comments'"
        label="New Comment"
        @click="communicationAreaRef.toggleCommentBox()"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Ref, inject, h, computed, onMounted, watch } from "vue";
import { useElementVisibility } from "@vueuse/core";
import {
  DotIcon,
  EmailAtIcon,
  CommentIcon,
  EmailIcon,
  ActivityIcon,
} from "@/components/icons";
import { EmailArea, CommentBox, HistoryBox } from "@/components";
import { useUserStore } from "@/stores/user";
import { Avatar } from "frappe-ui";

const props = defineProps({
  activities: {
    type: Array,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
});

const emit = defineEmits(["email:reply", "update"]);

const { getUser } = useUserStore();
const communicationAreaRef: Ref = inject("communicationArea");

const emptyText = computed(() => {
  let text = "No Activities";
  if (props.title == "Emails") {
    text = "No Email Communications";
  } else if (props.title == "Comments") {
    text = "No Comments";
    return text;
  }
});

const emptyTextIcon = computed(() => {
  let icon = ActivityIcon;
  if (props.title == "Emails") {
    icon = EmailIcon;
  } else if (props.title == "Comments") {
    icon = CommentIcon;
  }
  return h(icon, { class: "text-gray-500" });
});

function scrollToLatestActivity() {
  setTimeout(() => {
    let el;
    let e = document.getElementsByClassName("activity");
    el = e[e.length - 1];
    if (el && !useElementVisibility(el).value) {
      el.scrollIntoView({ behavior: "smooth" });
      el.focus();
    }
  }, 500);
}

defineExpose({
  scrollToLatestActivity,
});

onMounted(() => {
  scrollToLatestActivity();
});

watch(
  () => props.title,
  () => {
    scrollToLatestActivity();
  }
);
</script>
